$(document).ready(function () {
    var browserData = [{label: "IE", data: 15, color: "#848ca1"}, {
        label: "Safari",
        data: 14,
        color: "#767f96"
    }, {label: "Chrome", data: 34, color: "#697289"}, {label: "Opera", data: 13, color: "#5e667a"}, {
        label: "Firefox",
        data: 24,
        color: "#535a6c"
    }];
    $.plot($(".flot-pie"), browserData, {
        series: {pie: {show: true}},
        legend: {show: false},
        grid: {hoverable: true},
        stroke: {width: 0}
    });
    var barData = [{
        data: [[1391761856000, 8], [1394181056000, 4], [1396859456000, 2], [1399451456000, 2], [1402129856000, 5]],
        bars: {show: true, barWidth: 7 * 24 * 60 * 60 * 1000, fill: true, lineWidth: 0, order: 1, fillColor: "#FF604F"},
        color: "#FF604F"
    }, {
        data: [[1391761856000, 5], [1394181056000, 3], [1396859456000, 1], [1399451456000, 7], [1402129856000, 3]],
        bars: {show: true, barWidth: 7 * 24 * 60 * 60 * 1000, fill: true, lineWidth: 0, order: 2, fillColor: "#FFB244"},
        color: "#FFB244"
    }, {
        data: [[1391761856000, 3], [1394181056000, 6], [1396859456000, 4], [1399451456000, 4], [1402129856000, 4]],
        bars: {show: true, barWidth: 7 * 24 * 60 * 60 * 1000, fill: true, lineWidth: 0, order: 3, fillColor: "#28d8b3"},
        color: "#28d8b3"
    }];
    $.plot($('#bar-chart'), barData, {
        grid: {
            hoverable: false,
            clickable: false,
            borderWidth: 1,
            borderColor: '#f0f0f0',
            labelMargin: 8
        },
        xaxis: {
            min: (new Date(2014, 00, 1)).getTime(),
            max: (new Date(2014, 06, 18)).getTime(),
            mode: "time",
            timeformat: "%b",
            tickSize: [1, "month"],
            monthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
            tickLength: 0,
            axisLabel: 'Month',
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Open Sans, Arial, Helvetica, Tahoma, sans-serif',
            axisLabelPadding: 5
        },
        stack: true
    });
    var data = [], totalPoints = 300;

    function getRandomData() {
        if (data.length > 0) {
            data = data.slice(1);
        }
        while (data.length < totalPoints) {
            var prev = data.length > 0 ? data[data.length - 1] : 50, y = prev + Math.random() * 10 - 5;
            if (y < 0) {
                y = 0;
            } else if (y > 100) {
                y = 100;
            }
            data.push(y);
        }
        var res = [];
        for (var i = 0; i < data.length; ++i) {
            res.push([i, data[i]]);
        }
        return res;
    }

    var updateInterval = 30;
    var plot = $.plot(".realtime", [getRandomData()], {
        colors: ['#535a6c'],
        lines: {lineWidth: 1,},
        series: {shadowSize: 0},
        grid: {color: '#c2c2c2', borderColor: '#f0f0f0', borderWidth: 1, hoverable: true},
        xaxis: {show: false},
        yaxis: {min: 0, max: 100}
    });

    function update() {
        plot.setData([getRandomData()]);
        plot.draw();
        setTimeout(update, updateInterval);
    }

    update();
    var categoryData = [["January", 10], ["February", 8], ["March", 4], ["April", 13], ["May", 17], ["June", 9], ["July", 4], ["August", 9]];
    $.plot(".category", [categoryData], {
        colors: ['#24ACE5'],
        series: {bars: {show: true, barWidth: 0.5, align: 'center', fill: 1,}, shadowSize: 0},
        grid: {color: '#c2c2c2', borderColor: '#f0f0f0', borderWidth: 1},
        xaxis: {mode: "categories", tickLength: 0}
    });
    var visits = [[0, 5691], [1, 5403], [2, 15574], [3, 16211], [4, 16427], [5, 16486], [6, 14737], [7, 5838], [8, 5542], [9, 15560], [10, 18940], [11, 16970], [12, 17580], [13, 17511], [14, 6601], [15, 6158], [16, 17353]];
    var visitors = [[0, 4346], [1, 4116], [2, 11356], [3, 11875], [4, 11966], [5, 12086], [6, 10916], [7, 4507], [8, 4202], [9, 11523], [10, 14431], [11, 12599], [12, 13094], [13, 13234], [14, 5213], [15, 4806], [16, 12639]];
    var plotdata = [{data: visits, color: '#1F9FD4'}, {data: visitors, color: '#28d8b3'}];
    $.plot($('#line-chart'), plotdata, {
        series: {
            points: {show: true, radius: 3},
            lines: {show: true, lineWidth: 1,},
            shadowSize: 0
        },
        grid: {color: '#c2c2c2', borderColor: '#f0f0f0', borderWidth: 0, hoverable: true},
        yaxis: {autoscaleMargin: 0, labelWidth: 1}
    });
    function showTooltip(x, y, contents) {
        $('<div id="tooltip">' + contents + '</div>').css({top: y - 10, left: x + 20}).appendTo('body').fadeIn(200);
    }

    var previousPoint = null;
    $('#line-chart, .realtime').bind('plothover', function (event, pos, item) {
        if (item) {
            if (previousPoint !== item.dataIndex) {
                previousPoint = item.dataIndex;
                $('#tooltip').remove();
                var x = item.datapoint[0], y = item.datapoint[1];
                showTooltip(item.pageX, item.pageY, y + ' at ' + x);
            }
        } else {
            $('#tooltip').remove();
            previousPoint = null;
        }
    });
    var sparkData = {
        one: [15072.58, 14936.24, 14776.53, 14802.98, 15126.07, 15237.11, 15301.26, 15168.01, 15373.83],
        two: [75101625, 79619015, 102687707, 103191691, 106544823, 85725025, 81424571, 91440357, 92847606, 108489793, 156661158, 93465387, 107029840, 90628667, 88700570, 109871888, 92761362, 86600479, 79166369, 114052672, 101828652, 71196939, 91891170, 109203175, 103855700, 71196939],
        three: [108489793, 156661158, 93465387, 107029840, 90628667, 88700570, 109871888, 92761362, 86600479],
        pie: [35, 15, 50]
    };
    $('.sparkline-ext').sparkline(sparkData.three, {
        type: 'line',
        width: '100%',
        height: '60',
        lineWidth: 1,
        lineColor: '#ddd',
        spotColor: '#f1f4f9',
        fillColor: '',
        spotRadius: '3',
        valueSpots: {'0:': 'f1f4f9'}
    });
    $('.sparkline-ext').sparkline(sparkData.one, {
        composite: true,
        type: 'line',
        width: '100%',
        lineWidth: 1,
        lineColor: '#ddd',
        spotColor: '#f1f4f9',
        fillColor: '',
        spotRadius: '3',
        valueSpots: {'0:': 'f1f4f9'}
    });
    $('.sparkpie').sparkline(sparkData.pie, {
        type: 'pie',
        height: '60',
        sliceColors: ['#FF604F', '#FFB244', '#28d8b3']
    });
    $('.sparkline-line-bm').sparkline(sparkData.one, {
        type: 'line',
        width: '100%',
        height: '50',
        lineWidth: 0.5,
        lineColor: '#ccc',
        spotColor: '#ECF0F8',
        fillColor: '',
        spotRadius: '3',
        valueSpots: {'0:': 'ECF0F8'}
    });
    $('.sparkline-bar-bm').sparkline(sparkData.two, {
        type: 'bar',
        width: '100%',
        height: '65',
        barWidth: 5,
        barSpacing: 4,
        barColor: '#2ecc71'
    });
    $('.bounce').easyPieChart({
        size: 200,
        lineWidth: 9,
        barColor: '#17c3e5',
        trackColor: '#F3F5F8',
        lineCap: 'butt',
        easing: 'easeOutBounce',
        onStep: function (from, to, percent) {
            $(this.el).find('.percent').text(Math.round(percent));
        }
    });
    $('.visits').easyPieChart({
        size: 200,
        lineWidth: 20,
        barColor: '#2dcb73',
        trackColor: false,
        lineCap: 'round',
        easing: 'easeOutBounce',
        onStep: function (from, to, percent) {
            $(this.el).find('.percent').text(Math.round(percent));
        }
    });
    $('.total').easyPieChart({
        size: 200,
        lineWidth: 12,
        barColor: '#FFB244',
        trackColor: '#F3F5F8',
        lineCap: 'square',
        easing: 'easeOutBounce',
        scaleColor: false,
        onStep: function (from, to, percent) {
            $(this.el).find('.percent').text(Math.round(percent));
        }
    });
    $(".piechart").each(function () {
        var canvas = $(this).find("canvas");
        $(this).css({width: canvas.width(), height: canvas.height()});
    });
    var chartData = [{value: Math.random(), color: "#D97041"}, {
        value: Math.random(),
        color: "#C7604C"
    }, {value: Math.random(), color: "#21323D"}, {value: Math.random(), color: "#9D9B7F"}, {
        value: Math.random(),
        color: "#7D4F6D"
    }, {value: Math.random(), color: "#584A5E"}];
    var ctx = $("#plot-area").get(0).getContext("2d");
    var myPolarArea = new Chart(ctx).PolarArea(chartData);
    var radarChartData = {
        labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Partying", "Running"],
        datasets: [{
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            data: [65, 59, 90, 81, 56, 55, 40]
        }, {
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            data: [28, 48, 40, 19, 96, 27, 100]
        }]
    };
    var ptx = $("#radar").get(0).getContext("2d");
    var myRadar = new Chart(ptx).Radar(radarChartData, {scaleShowLabels: false, pointLabelFontSize: 10});
    var tax_data = [{"period": "2011 Q3", "licensed": 3407, "sorned": 660}, {
        "period": "2011 Q2",
        "licensed": 3351,
        "sorned": 629
    }, {"period": "2011 Q1", "licensed": 3269, "sorned": 618}, {
        "period": "2010 Q4",
        "licensed": 3246,
        "sorned": 661
    }, {"period": "2009 Q4", "licensed": 3171, "sorned": 676}, {
        "period": "2008 Q4",
        "licensed": 3155,
        "sorned": 681
    }, {"period": "2007 Q4", "licensed": 3226, "sorned": 620}, {
        "period": "2006 Q4",
        "licensed": 3245,
        "sorned": null
    }, {"period": "2005 Q4", "licensed": 3289, "sorned": null}];
    Morris.Line({
        element: 'hero-graph',
        data: tax_data,
        xkey: 'period',
        ykeys: ['licensed', 'sorned'],
        labels: ['Licensed', 'Off the road'],
        lineColors: ['#20aae5', '#bdc3c7']
    });
    Morris.Donut({
        element: 'hero-donut',
        data: [{label: 'Jam', value: 25}, {label: 'Frosted', value: 40}, {label: 'Custard', value: 25}, {
            label: 'Sugar',
            value: 10
        }],
        colors: ['#20aae5'],
        formatter: function (y) {
            return y + "%";
        }
    });
    Morris.Area({
        element: 'hero-area',
        data: [{period: '2010 Q1', iphone: 2666, ipad: null, itouch: 2647}, {
            period: '2010 Q2',
            iphone: 2778,
            ipad: 2294,
            itouch: 2441
        }, {period: '2010 Q3', iphone: 4912, ipad: 1969, itouch: 2501}, {
            period: '2010 Q4',
            iphone: 3767,
            ipad: 3597,
            itouch: 5689
        }, {period: '2011 Q1', iphone: 6810, ipad: 1914, itouch: 2293}, {
            period: '2011 Q2',
            iphone: 5670,
            ipad: 4293,
            itouch: 1881
        }, {period: '2011 Q3', iphone: 4820, ipad: 3795, itouch: 1588}, {
            period: '2011 Q4',
            iphone: 15073,
            ipad: 5967,
            itouch: 5175
        }, {period: '2012 Q1', iphone: 10687, ipad: 4460, itouch: 2028}, {
            period: '2012 Q2',
            iphone: 8432,
            ipad: 5713,
            itouch: 1791
        }],
        xkey: 'period',
        ykeys: ['iphone', 'ipad', 'itouch'],
        labels: ['iPhone', 'iPad', 'iPod Touch'],
        pointSize: 2,
        resize: true,
        hideHover: 'auto',
        lineColors: ['#20aae5', '#5cb85c', '#FF604F']
    });
    Morris.Bar({
        element: 'hero-bar',
        data: [{device: 'iPhone', geekbench: 136}, {device: 'iPhone 3G', geekbench: 137}, {
            device: 'iPhone 3GS',
            geekbench: 275
        }, {device: 'iPhone 4', geekbench: 380}, {device: 'iPhone 4S', geekbench: 655}, {
            device: 'iPhone 5',
            geekbench: 1571
        }],
        xkey: 'device',
        ykeys: ['geekbench'],
        labels: ['Geekbench'],
        barRatio: 0.4,
        xLabelAngle: 35,
        hideHover: 'auto',
        barColors: ['#20aae5']
    });
});